/* En-tête avec vidéo */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #d6d0b6; /* Couleur de fond */
}

.header {
    width: 100%;
    height: 100px; /* Hauteur de la bande vidéo en haut */
    display: grid; /* Utilisation de Grid Layout */
    place-items: center; /* Centre le contenu horizontalement et verticalement */
    overflow: hidden;
}

/* Bande d'image */
.bande-image {
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
    object-fit: cover; /* Coupe ou agrandit l'image pour remplir l'espace sans déformation */
    object-position: center; /* Centre l'image si elle est coupée */

}

/* Texte superposé */
.image-overlay {
    display: flex; /* Utilisation de Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    color: #d6d0b6; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    font-size: 2rem; /* Taille du texte */
    font-family: Arial, sans-serif; /* Police du texte */
    text-shadow: 7px 3px 6px rgba(0, 0, 0, 0.7); /* Ombre portée pour le contraste */
    -webkit-text-stroke: 0.5px black; /* Contour du texte */
    z-index: 1; /* Place l'image derrière le texte */
}

.image-overlay h1 {
    font-family: 'Poor Richard', sans-serif; /* Police personnalisée */
    font-size: 3.5rem; /* Taille du texte */
    font-weight: 800; /* Gras */
}

/* Contenu principal */
.main-content {
    display: flex;
    flex-direction: column; /* Pour que les sections se superposent */
    padding: 20px;
}

/* Bloc avec image et texte alignés horizontalement (image à gauche, texte à droite) */
.content-block {
    display: flex;
    flex-direction: row; /* Image à gauche, texte à droite */
    align-items: center; /* Aligne l'image et le texte au centre verticalement */
    margin-bottom: 10px; /* Un peu d'espace entre les blocs */
    font-family: 'Palatino Linotype', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

.content-block.reverse {
    flex-direction: row-reverse; /* Inverse l'ordre : image à droite, texte à gauche */
}

/* Style pour les images */
.content-block img {

    width: 330px; /* Largeur de l'image */
    height: auto;
}

/* Style pour le texte */
.content-block p {
    flex: 1; /* Le texte prend tout l'espace restant */
    text-align: justify;
}

/* Pied de page */
.footer {
    background-color: #b6b086;
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: 'Poor Richard', sans-serif;
    font-size: 1.5rem;
    font-weight: 250;
}

.footer a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}

img {
    border-radius: 15px; /* Arrondi des bords */
    overflow: hidden; /* Assure que les parties débordantes sont masquées */
}

/* Animation de rotation avec effet */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Style de l'image */
.rotate-image {
    width: 50px;
    height: auto;
    animation: spin 5s ease-in-out infinite; /* Ralentit au début/à la fin */
    transition: transform 0.5s; /* Transition fluide pour les interactions */
}

/* Pause au survol */
.rotate-image:hover {
    animation-play-state: paused; /* L'animation s'arrête au survol */
}
